import React, { useEffect, useState } from 'react'
import http from '../../utils/http'
import styles from './index.module.scss'
import icon1 from '../../images/icon1.png'
import icon2 from '../../images/icon2.png'
import { useNavigate } from 'react-router-dom'
import { HeartOutline } from 'antd-mobile-icons'
import { ProductCard } from 'react-vant';
import { SearchBar, Tabs, Card, List, Tag, Image } from 'antd-mobile'
function Index() {
  const navigate = useNavigate()
  const userInfos = JSON.parse(localStorage.getItem('userInfo') || '[]')
  const [list, setList] = useState([])
  const getList = async () => {
    const res = await http.get('/api/list')
    console.log(res);
    const { code, data } = res.data
    if (code === 200) {
      setList(data)
    }
  }
  useEffect(() => {
    getList()
  }, [])

  const [collectList, setCollectList] = useState(
    JSON.parse(localStorage.getItem("collectList")) || []
  );

  const handelColl = (item) => {
    const collState = collectList.some((it) => it.id === item.id);

    if (collState) {
      const filterList = collectList.filter((it) => it.id !== item.id);
      setCollectList(filterList);
      localStorage.setItem("collectList", JSON.stringify(filterList));
    } else {
      setCollectList([...collectList, item]);
      localStorage.setItem(
        "collectList",
        JSON.stringify([...collectList, item])
      );
    }
  };

  const handledetail = (id) => {
    navigate(`/detail/${id}`)
  }
  return (
    <div>
      <div className={styles.box_wroe}>
        <div className={styles.top_wroe}>
          <div>
            <span><img src={icon1} alt="" /></span>
            <b>订票服务</b>
          </div>
          <div>
            <span onClick={()=>navigate('/messageg')}><img src={icon2} alt="" /></span>
            <p><img src={userInfos.avatar} alt="" style={{ borderRadius: '50%' }} /></p>
          </div>
        </div>
        <div className={styles.center_wroe}>
          <span>大家都可以随时随地发现精彩活动</span>
          <p>就在你身边</p>
        </div>
        <div className={styles.search_wroe}>
          <SearchBar
            placeholder='请输入关键字'
            style={{
              '--border-radius': '30px',
            }}
          />
        </div>
        <div>
          <Tabs
            style={{
              '--active-line-color': '#171a2d',
              '--active-title-color': '#fff'
            }}
          >
            <Tabs.Tab title='现场音乐会' key='1' />
            <Tabs.Tab title='艺术展览' key='2' />
            <Tabs.Tab title='专业研讨会' key='3' />
            <Tabs.Tab title='体育团队竞赛' key='4' />
          </Tabs>
        </div>
      </div>
      <div className={styles.title_wroe}>
        <h2>最新活动</h2>
        <a>查看全部</a>
      </div>
      <div className={styles.list_wroe}>
        <div className={styles.listbox_wroe}>
          {
            list?.map((item, ind) => (
              <div
                key={ind}
                className={styles.boxlist_wroe}
              >
                <img src={item.image} alt="" />
                <List.Item
                  title='电音音乐节'
                >
                  <div className={styles.text_wroe}>
                    <div>
                      <span className={styles.images_wroe}>
                        <img src={item.image} alt="" style={{ width: '50px', height: '50px', borderRadius: '50%' }} />
                        <div className={styles.imagess_wroe}>
                          <p>音乐会</p>
                          <p><HeartOutline
                            onClick={() => handelColl(item)}
                            fontSize={20}
                            color={
                              collectList.some((it) => it.id === item.id)
                                ? "orangered"
                                : "#999"
                            }
                          />
                          </p>
                        </div>
                      </span>
                      <p>
                        {item.title}
                      </p>
                    </div>
                    <div>
                      <Tag round color='#2db7f5' style={{ marginTop: '50px' }} onClick={() => handledetail(item.id)}>
                        ￥{item.price}
                      </Tag>
                    </div>
                  </div>
                </List.Item>
                <List.Item
                  extra={
                    <div>{item.date}</div>
                  }
                >
                  <div>
                    <b>168</b>参与者
                  </div>
                </List.Item>
              </div>
            ))
          }
        </div>
      </div>
      <Card title='类别' extra={<a>查看全部</a>}>
        <List>
          {list.map((item, ind) => (
            <List.Item
              key={ind}
              prefix={
                <Image
                  src={item.image}
                  style={{ borderRadius: 20 }}
                  fit='cover'
                  width={40}
                  height={40}
                />
              }
              description={item.title}
            >
              {item.title}
            </List.Item>
          ))}
        </List>
      </Card>
      <Card title='进行中' extra={<a>查看全部</a>}>
        {
          list?.map((item, ind) => (
            <ProductCard
              key={ind}
              num={item.date}
              price={item.title}
              desc={item.title}
              title={item.id}
              thumb={item.image}
            />
          ))
        }
      </Card>
    </div>
  )
}

export default Index
